﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JS(JQ)常用代码.aspx.cs" Inherits="ProjectStudy.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        //元素屏幕居中
        jQuery.fn.center = function () {
            this.css('position', 'fixed');
            this.css('top', ($(window).height() - this.height()) /2 +$(window).scrollTop() + 'px');
            this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px'); return this;
        }

        //页面滚动到指定元素位置
        jQuery.fn.autoscroll = function(selector) {
         $('html,body').animate(
         {scrollTop: $(selector).offset().top});
        }

        //清除form内容
        function clearForm(form) {
            $(':input', form).each(function () {
                var type = this.type;
                var tag = this.tagName.toLowerCase(); // normalize case
                if (type == 'text' || type == 'password' || tag == 'textarea')
                    this.value = "";
                else if (type == 'checkbox' || type == 'radio')
                    this.checked = false;
                else if (tag == 'select')
                    this.selectedIndex = -1;
            });
        };

        //查找gridview中是否有选中的行
        function hasSelectedCheckbox(gridview, chkName) {
            var chkList = jQuery(gridview).find(":checkbox[name^='" + chkName + "']:checked");          
            if (chkList.length > 0) {
                alert("选中多行");
                return true;
            }
            alert("最少选中一行");
            return false;
        }


        $(function () {
            $("#divCenter").center();
            $("#hh").autoscroll();

            $("<%=btnClear.ClientID %>").click(function () {
                var form = document.getElementById("form1");
                clearForm(form);
            });

            $("#" + "<%=Button2.ClientID %>").click(function () {
                var gridview = document.getElementById("<%=GridView1.ClientID %>");
                
                hasSelectedCheckbox(gridview, "chkItem");
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="显示/隐藏" onclick="Button1_Click" />
    </div>
    <div runat="server" id="div1">
    <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>北京</asp:ListItem>
            <asp:ListItem>上海</asp:ListItem>
            <asp:ListItem>广州</asp:ListItem>
            <asp:ListItem>深圳</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <asp:ListBox ID="ListBox1" runat="server">
            <asp:ListItem>一线</asp:ListItem>
            <asp:ListItem>二线</asp:ListItem>
            <asp:ListItem>三线</asp:ListItem>
            <asp:ListItem>四线</asp:ListItem>
        </asp:ListBox>
        <br />
        <br />
        <asp:RadioButton ID="RadioButton1" runat="server" GroupName="sex" Text="男"/>
&nbsp;<asp:RadioButton ID="RadioButton2" runat="server" GroupName="sex" Text="女" />
        <br />
        <br />
        <asp:Button ID="btnClear" runat="server" Text="清除" OnClientClick="clearForm();" />
        <br />
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            
            <Columns>
            
                <asp:TemplateField>
                  <HeaderTemplate>
                      <input  type="checkbox" id="selAll"/>
                  </HeaderTemplate>
                    <ItemTemplate>
                        <input  type="checkbox" name="chkItem"/>
                    </ItemTemplate>
                </asp:TemplateField>
               
                <asp:BoundField DataField="id" HeaderText="班级ID" />
                <asp:BoundField DataField="className" HeaderText="班级名称" />
                <asp:BoundField DataField="classDesc" HeaderText="班级描述" />
                <asp:BoundField DataField="isDel" HeaderText="是否已删除" />
            </Columns>
        </asp:GridView>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <asp:Button ID="Button2" runat="server" Text="删除" />
        <button id="hh">呵呵</button>
        <br />
    </div>
    <div id="divCenter" style=" width:100px; height:100px; background:red;"></div>
    </form>
</body>
</html>
